<template>
	<div id="ExpertIntro">
		<x-header :left-options="{showBack: false}" title="专家详情" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="title">
			<div class="top">
				<img :src="'/los' + expertIntro.expert_headimg" alt="" />
				<div class="right">
					<!--<b>珠宝专家</b>-->
					<p class="name"><span>{{expertIntro.expert_name}}</span></p>
					<p class="advantage">擅长领域:{{expertIntro.expert_area}}</p>
					<p class="honor">{{expertIntro.expert_actor}}</p>
					<p class="attention">+ 关注</p>
				</div>
			</div>
			<card>
				<div slot="content" class="card-demo-flex card-demo-content01">
					<div class="vux-1px-r">
						<span>{{expertIntro.follow_count}}</span>
						<br/><b>粉丝</b>
					</div>
					<div class="vux-1px-r">
						<span>{{expertIntro.appraisal_count}}</span>
						<br/><b>鉴品</b>
					</div>
					<div class="vux-1px-r">
						<span>{{quaImg.length}}</span>
						<br/><b>证书</b>
					</div>
				</div>
			</card>
		</div>
		<div class="introduce block">
			<div class="intro" v-html="expertIntro.expert_description">
				{{expertIntro.expert_description}}
			</div>
			<div class="more" @click="isMore()">
				<span class="txt">{{moretxt}}</span>
				<img class="marrow" :src="moresrc" />
			</div>
		</div>
		<div class="glory">
			<h2>荣誉证书</h2>
			<scroller lock-y :scrollbar-x=false :bounce=false>
				<ul>
					<li v-for="item in quaImg">
						<img class="cerdent" :src="'/los' + item" alt="" />
					</li>
				</ul>
			</scroller>
			<!--<previewer :list="quaImg" ref="previewer" @on-index-change="logIndexChange"></previewer>-->
		</div>
		<div class="auctions">
			<h2>鉴定拍品({{auctionList.length}}件)</h2>
			<ul>
				<li v-for="item in auctionList">
					<img class="auction" :src="'/los' + item.appraisal_img" alt="" />
				</li>

			</ul>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader, Toast, Card, Scroller, Previewer } from "vux";

	export default {
		data() {
			return {
				moretxt: '查看更多',
				expertIntro: '',
				quaImg: [],
				auctionList: [],
				moresrc: require('../assets/images/home/icon_down.png')
			}
		},
		components: {
			XHeader,
			Toast,
			Card,
			Scroller,
			Previewer
		},
		activated() {
			this.expertInfo();
			this.getAuction();
		},
		methods: {
			expertInfo: function() {
				let expert_id = this.$route.params.expert_id;
				var params = {
					expert_id: expert_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/appraisal/expert_info.json',
					data: params
				}).then((result) => {
					this.expertIntro = result.data.data;
					this.quaImg = result.data.data.expert_qualification.split(",");
				}).catch((err) => {})
			},
			getAuction: function() {
				let expert_id = this.$route.params.expert_id;
				var params = {
					expert_id: expert_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/appraisal/search.json',
					data: params
				}).then((result) => {
					this.auctionList = result.data.data;
				}).catch((err) => {

				})
			},

			logIndexChange: function(arg) {
				console.log(arg)
			},
			showLimg: function(index) {
				this.$refs.previewer.show(index);
			},
			isMore: function() {
				let _this = this;
				if($('.introduce').hasClass("block")) {
					let height = $('.introduce').height() + $('.intro').height();
					$('.introduce').removeClass('block');
					$('.intro').animate({
						'height': height
					});
					_this.moretxt = '点击收起';
					_this.moresrc = require('../assets/images/home/icon_up.png');
				} else {
					$('.introduce').addClass('block');
					$('.intro').animate({
						'height': '1.56rem'
					});
					_this.moretxt = '查看更多';
					_this.moresrc = require('../assets/images/home/icon_down.png');
				}
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.title {
		background: #99bcff;
		padding: 0.45rem 0.26rem 0;
		overflow: hidden;
	}
	
	.title .top {
		overflow: hidden;
	}
	
	.title .top img {
		float: left;
		width: 2.13rem;
		height: 2.13rem;
		border-radius: 50%;
	}
	
	.title .top .right {
		float: left;
		color: #fff;
		width: 72%;
		position: relative;
		margin: 0.21rem 0 0.21rem 0.4rem;
	}
	
	.title .top .right .name {
		overflow: hidden;
	}
	
	.title .top .right .name span {
		font-size: 0.42rem;
		float: left;
	}
	
	.title .top .right .name b {
		float: left;
		margin-top: 0.02rem;
		font-size: 0.26rem;
		font-weight: normal;
		color: #663601;
		border-radius: 0.1rem;
		width: 1.68rem;
		height: 0.45rem;
		display: inline-block;
		text-align: center;
		margin-left: 0.5rem;
		background: linear-gradient(to right, #fae3b9, #edae69);
	}
	
	.title .top .right .advantage {
		margin: 0.32rem 0;
		font-size: 0.32rem;
		color: #fff;
		opacity: 0.7;
	}
	
	.title .top .right .honor {
		font-size: 0.32rem;
		color: #fff;
		opacity: 0.7;
	}
	
	.title .top .right .attention {
		width: 1.44rem;
		height: 0.53rem;
		line-height: 0.53rem;
		position: absolute;
		right: 0;
		top: 40%;
		text-align: center;
		color: #fff;
		font-size: 0.32rem;
		border: solid 1px #e6e6e6;
	}
	
	.weui-panel {
		background: #99bcff;
		margin-top: 0.4rem;
		height: 1.17rem;
		padding: 0.21rem 0;
	}
	
	.weui-panel:before {
		opacity: 0.7;
	}
	
	.weui-panel .weui-panel__bd b {
		font-weight: normal;
		opacity: 0.5;
		color: #fff;
		font-size: 0.29rem;
	}
	
	.weui-panel:after {
		border: none;
	}
	
	.vux-1px-r:after {
		height: 0.4rem;
		top: 35%;
		opacity: 0.7;
	}
	
	.vux-1px-r:last-child:after {
		border: none;
	}
	
	.introduce {
		padding: 0.53rem 0.4rem;
		background: #fff;
		overflow: auto;
	}
	
	.introduce .intro {
		font-size: 0.34rem;
		line-height: 0.52rem;
		height: 1.56rem;
		color: #777;
		overflow: hidden;
	}
	
	.introduce .more {
		height: 0.6rem;
		line-height: 0.6rem;
		margin-top: 0.26rem;
		text-align: center;
	}
	
	.introduce .up {
		height: 1.38rem;
		line-height: 1.38rem;
		text-align: center;
		display: none;
	}
	
	.introduce .up img {
		width: 0.32rem;
		height: 0.32rem;
	}
	
	.introduce .up span,
	.introduce .more span {
		font-size: 0.34rem;
		color: #aaa;
	}
	
	.introduce .more img {
		width: 0.32rem;
		height: 0.32rem;
	}
	
	.glory {
		margin-top: 0.26rem;
		background: #fff;
	}
	
	.glory h2,
	.auctions h2 {
		height: 1.17rem;
		line-height: 1.17rem;
		font-size: 0.4rem;
		padding: 0 0.26rem;
		color: #333;
		position: relative;
	}
	
	.glory h2:after,
	.auctions h2:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.17rem;
		width: 94%;
		margin: 0 auto;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.glory ul {
		height: 2.85rem;
		position: relative;
		width: 13.33rem;
		overflow: hidden;
		padding: 0.37rem 0.26rem;
	}
	
	.glory ul li {
		width: 3.06rem;
		height: 2.1rem;
		line-height: 2.1rem;
		background-color: #ccc;
		display: inline-block;
		margin-right: 0.13rem;
		float: left;
		text-align: center;
	}
	
	.glory ul li .cerdent {
		width: 3.06rem;
		height: 2.1rem;
	}
	
	.glory ul li:last-child,
	.auctions ul li:last-child {
		margin-right: 0;
	}
	
	.auctions {
		margin-top: 0.26rem;
		background: #fff;
	}
	
	.glory ul {
		height: 2.85rem;
		position: relative;
		width: 13.33rem;
		overflow: hidden;
		padding: 0.37rem 0.26rem;
	}
	
	.auctions ul {
		padding: 0.37rem 0.26rem;
		width: 100%;
		height: 4rem;
	}
	
	.auctions ul li {
		float: left;
		width: 3.06rem;
		height: 2.46rem;
		margin-right: 0.13rem;
	}
	
	.auctions ul li .auction {
		width: 3.06rem;
		height: 2.46rem;
	}
	/*列表Card*/
	
	.card-demo-flex {
		display: flex;
	}
	
	.card-padding {
		padding: 15px;
	}
	
	.card-demo-flex>div {
		flex: 1;
		text-align: center;
		font-size: 0.29rem;
		color: #fff;
	}
	
	.card-demo-flex span {
		color: #fff;
		font-size: 0.34rem;
		display: inline-block;
		margin-bottom: 0.08rem;
	}
</style>